<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3480126_q9hrksv5bq.css">
    </link>
</head>


<body>
    <div class="nav">
        <div class="con">
            <div class="left">
            </div>
            <div class="right">
                <div class="listxx">
                    <ul>
                        <li class="hd geth">首页</li>
                        <li class="hd gets">书库</li>
                        <li class="hd getl">排行榜</li>
                        <li class="hd getn">作家专区</li>
                        <li class="hd">作家福利</li>
                    </ul>
                </div>
                <div class="list2">
                    <div class="search">
                        <div class="ipt">
                            <input type="text" placeholder="请输入书名或者作者" id="ipt">
                        </div>
                        <div class="searchList">
                            <button class="sr"><i class="iconfont icon-sousuo"></i></button>
                        </div>
                    </div>
                    <div class="lr">
                        <span class="llrr">登录</span>
                        <span class="s">|</span>
                        <span class="llrr">注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <!-- 排行榜区域 -->
            <div class="leaderboard">
                <div class="man_leaderboard">
                    <p class="m">男生排行榜</p>
                </div>
                <div class="woman_leaderboard">
                    <p class="w">女生排行榜</p>
                </div>
            </div>
            <div class="content">
                <div class="classesTitle">
                    <p class="sex">男生-</p>
                    <p class="classes">都市榜</p>
                </div>
                <div class="novelsList">
                    <ul class="list">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="ff">
            <div class="cont">
                <div class="left">
                    <div class="top">

                    </div>
                    <div class="cc">

                    </div>
                    <div class="ft">
                        <ul>
                            <li>2022 北京时光荏苒科技有限公司</li>
                            <li>京ICP备18018851号-8 |京公网安备 11010802030409号 | 京ICP证 京B2-20200085号 |</li>
                            <li>网络文化经营许可证：京网文[2020]1043-169号</li>
                            <li>请使用者仔细阅读《番茄小说网用户协议》、《番茄小说网隐私政策》说明</li>
                            <li>广告投放：www.oceanengine.com 不良信息举报：fanqiejubao@bytedance.com</li>
                            <li>意见建议邮箱：original_articles@bytedance.com 版权咨询：1748420113@qq.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="xcx">
                    <div class="ig">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/dycode.png"
                            alt="">
                    </div>
                    <div class="tx">
                        <p><i class="iconfont icon-douyin"></i> 打开抖音扫码关注官方账号</p>
                    </div>
                </div>
                <div class="code_ma">
                    <div class="m">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/wechat.png"
                            alt="">
                    </div>
                    <div class="tt">
                        <p><i class="iconfont icon-weixin1"></i> 扫码关注微信公众号</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let lb = document.querySelector(".leaderboard");
    let m = document.querySelector(".man_leaderboard");
    let w = document.querySelector(".woman_leaderboard");
    let cnt = document.querySelector(".content");
    // 分类数据
    const result = async () => {
        let data = [];
        let res = await axios.get("/leaderboard");
        data_man = [...res.data.data.result_man];
        data_woman = [...res.data.data.result_woman];
        const getNovels = async (res = "都市榜") => {
            let data = [];
            let params = {
                lb: res,
            };
            let result = await axios.post("/novelsList", params);
            console.log(result)
            data = [...result.data.data];
            let list = document.querySelector(".list");
            list.innerHTML = ""
            data.map(el => {
                let li = document.createElement("li");
                let d1 = document.createElement("div");
                let d2 = document.createElement("div");
                d2.className = "d2";
                let d3 = document.createElement("div");
                d3.className = "d3";
                let aa = document.createElement("a");
                aa.href = `/public/detail/index.html?${el.id}`
                let img = document.createElement("img");
                img.src = el.img;
                aa.appendChild(img);
                d1.appendChild(aa);
                li.appendChild(d1);
                let p1 = document.createElement("p");
                p1.className = "p1";
                p1.innerHTML = el.name;
                d2.appendChild(p1);
                let info = [el.name, el.state, el.count + "万字"];
                info.map((el) => {
                    let sp = document.createElement("span");
                    sp.className = "sp";
                    sp.innerHTML = el;
                    d2.appendChild(sp);
                });
                let p2 = document.createElement("p");
                p2.className = "p2";
                p2.innerHTML = el.summary;
                d2.appendChild(p2);
                let p3 = document.createElement("p");
                p3.className = "p3";
                p3.innerHTML = "最近更新:" + el.lastest_update;
                d2.appendChild(p3);
                li.appendChild(d2);
                let p4 = document.createElement("p");
                p4.className = "p4";
                p4.innerHTML = "书籍详情";
                p4.style.color = "#ff5000"
                d3.appendChild(p4);
                li.appendChild(d3);
                list.appendChild(li);
            });
        };
        getNovels()

        let ul = document.createElement('ul');
        data_man.map((el, i) => {
            let lis = document.createElement('li');
            lis.className = "hds2"
            lis.innerHTML = el.classes
            ul.appendChild(lis);
            m.appendChild(ul);
            lis.onclick = function () {
                getNovels(el.classes);
                let sex = document.querySelector(".sex");
                let classes = document.querySelector(".classes");
                sex.innerHTML = "男生-";
                classes.innerHTML = el.classes;
            }
        })
        let ul1 = document.createElement("ul");
        data_woman.map((el) => {
            let lis1 = document.createElement("li");
            lis1.innerHTML = el.classes;
            ul1.appendChild(lis1);
            w.appendChild(ul1);
            lis1.onclick = function (i) {
                getNovels(el.classes);
                let sex = document.querySelector(".sex");
                let classes = document.querySelector(".classes");
                sex.innerHTML = "女生-";
                classes.innerHTML = el.classes;
            }
        });
    }
    result();
    let getn = document.querySelector('.getn')
    let getl = document.querySelector('.getl')
    let gets = document.querySelector('.gets')
    let geth = document.querySelector('.geth')
    getn.addEventListener('click',()=>{
        window.location.href = '/public/author_area/index.html'
    })
    getl.addEventListener('click',()=>{
        window.location.href = '/public/leaderboard/index.html'
    })
    gets.addEventListener('click',()=>{
        window.location.href = '/public/libary/index.html'
    })
    geth.addEventListener('click',()=>{
        window.location.href = '/public/home/index.html'
    })
    let ipt = document.getElementById("ipt")
    let btn = document.querySelector('.sr')
    btn.addEventListener('click', () => {
        let val = ipt.value
        if (val === '') return
        window.location.href = `/public/search/index.html?${val}`
    })
    let hds = document.querySelectorAll(".hd");
    hds[2].style.color = "#ff5000";
    hds[2].style.borderBottom = "2px solid #ff5000";
    for (let i = 0; i < hds.length; i++) {
        hds[i].onclick = function () {
            for (let i = 0; i < hds.length; i++) {
                hds[i].style.color = ""
                hds[i].style.borderBottom = ""
            }
            this.style.color = "#ff5000"
            this.style.borderBottom = "2px solid #ff5000"
        }
    }
</script>

</html>